import { Col, Form } from "antd";
import type { ColEx } from "../types";
import { useMemo } from "react";
// import { BasicArrow } from "@/components/Basic";
import { FormActionType } from "../types/form";
import { ActionPropsType, ActionPropsDefault, ButtonOptions } from "../props";
import { useTranslation } from "react-i18next";
import { Button } from "@/components/Button";
import { BasicArrow } from "@/components/Basic";

interface ComponentProps {
	toggleAdvanced: () => void;
	formActionType: FormActionType;
}

const FormAction = (props: ActionPropsType & ComponentProps) => {
	// fix React18 "defaultProps" problem
	props = Object.assign({}, { ...ActionPropsDefault, ...props });

	const { t } = useTranslation();

	const FormItem = Form.Item;

	const actionColOpt = useMemo(() => {
		const { showAdvancedButton, actionSpan: span, actionColOptions } = props;
		const actionSpan = 24 - (span as number);
		const advancedSpanObj = showAdvancedButton ? { span: actionSpan < 6 ? 24 : actionSpan } : {};
		const actionColOpt: Partial<ColEx> = {
			style: { textAlign: "right" },
			span: showAdvancedButton ? 6 : 4,
			...advancedSpanObj,
			...actionColOptions
		};
		return actionColOpt;
	}, [props.showAdvancedButton, props.actionSpan, props.actionColOptions]);

	const getResetBtnOptions = useMemo((): ButtonOptions => {
		return Object.assign(
			{
				text: t("common.resetText")
			},
			props.resetButtonOptions
		);
	}, [props.resetButtonOptions]);

	const getSubmitBtnOptions = useMemo(() => {
		return Object.assign(
			{
				text: t("common.searchText")
			},
			props.submitButtonOptions
		);
	}, [props.submitButtonOptions]);

	const resetAction = () => {
		props.formActionType && props.formActionType.resetFields();
	};
	const submitAction = () => {
		props.formActionType && props.formActionType.handleSubmit();
	};

	return (
		props.showActionButtonGroup && (
			<Col {...actionColOpt}>
				<div style={{ width: "100%", textAlign: actionColOpt.style.textAlign }}>
					<FormItem>
						{props.showResetButton && (
							<Button type="default" className="mr-2" {...getResetBtnOptions} onClick={resetAction}>
								{getResetBtnOptions.text}
							</Button>
						)}
						{props.showSubmitButton && (
							<Button type="primary" className="mr-2" {...getSubmitBtnOptions} onClick={submitAction}>
								{getSubmitBtnOptions.text}
							</Button>
						)}
						{/* Jok-20250213-隐藏箭头 */}
						{props.showAdvancedButton && !props.hideAdvanceBtn && (
							<Button type="link" size="small" onClick={props.toggleAdvanced}>
								{props.isAdvanced ? t("component.form.putAway") : t("component.form.unfold")}
								<BasicArrow className="ml-1" expand={!props.isAdvanced} up />
							</Button>
						)}
					</FormItem>
				</div>
			</Col>
		)
	);
};

export default FormAction;
